<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>test test</title>
<!-- css START -->
<style>
    a {text-decoration:none;color:blue;}

    textarea,input[type=button],#result,input[type=text],select {
        font-size:1.3em;
        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    }
    
    textarea,input[type=text],select {
        border: 1px solid #ccc;
        border-radius: 2px;
        box-shadow: 0px 0px 2px #B6B6B6;
    }

    textarea,.weakresult,.result,input[type=text],select {background-color:rgba(252, 252, 252, 0.4);}
    
    input[type=button] {
        -webkit-appearance:none;

        background: #eaefea;
        border: 1px solid #eaefea;
        padding: 4px 11px;
        color: #777;
        box-shadow: 0px 0px 2px #B6B6B6;
        border-radius: 1px;
        text-shadow: 1px 1px 1px #3F9E3F;
        cursor: pointer;
    }

    input[type=button]:hover,textarea:hover,input[type=text]:hover,select:hover { 
        border: 1px solid rgb(87, 198, 232);
        box-shadow: 0px 0px 3px rgb(87, 198, 232);
    }

    .main{padding: 5px;}

    .weakresult {color: gray;opacity: 0.4;filter: alpha(opacity= 40);}
    
    input[type=button],input[type=text],select {margin:10px 10px 10px 0;}
    
    #background {position: fixed;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;pointer-events: none;}
    body,textarea,#result {margin:0;}
    .left {width: 20%;height:100%;float:left;}
    .middle {width: 60%;height:100%; margin: 0; padding: 0;float:left;}
    .right {width: 20%;height:100%;float:left;}
    .middletop {width: 100%; margin:0; margin-top: 4em; padding: 0;}
</style></head><body><pre id="mobilecss" style="display: none;">
    textarea,input[type=button],#result,input[type=text],select {font-size:3em}

    .left {display: none;}
    .middle {width: 100%;height:100%; margin: 0;}
    .right {display: none;}

    .middletop {display: none;}
</pre>
<!-- css END -->
<script type="text/javascript">
    isMobile=0;
    if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
        isMobile=1;
    }
    if(isMobile){
        var cssNode=document.createElement("style");
        cssNode.innerHTML=document.getElementById('mobilecss').innerText;
        document.head.appendChild(cssNode);
        //document.head.innerHTML+='<style>'+mobilecss.innerText+'</style>';
    }
</script>
<canvas id="background"></canvas>
<script>
//背景
(function(){
    var background = document.getElementById('background');
    var resize = function(){
        var ratio = window.devicePixelRatio || 1;
        var dc=background.getContext('2d');
        
        background.width = innerWidth*ratio;
        background.height = innerHeight*ratio;
        dc.scale(ratio, ratio);

        var bsize=32+isMobile*32;
        var fullWidth=~~((innerWidth-17)*ratio);
        var fullHeight=~~(innerHeight*ratio);
        
        var fullX=~~(fullWidth/bsize)-1;
        var fullY=~~(fullHeight/bsize)-1;

        var colorA=["#f9f9f9","#fdfdfd"];
        var colorIndex =1;
        for(ii=0;ii<=fullX+1;ii++){
            colorIndex=ii%2;
            for(jj=0;jj<=fullY+1;jj++){
                dc.fillStyle=colorA[colorIndex];
                if(Math.random()<0.03)dc.fillStyle='#'+'ef'[~~(Math.random()*2)]+''+'ef'[~~(Math.random()*2)]+''+'ef'[~~(Math.random()*2)];
                colorIndex=1-colorIndex;
                dc.fillRect(ii*bsize,jj*bsize,bsize,bsize);
            }
        }
    };
    resize();
    window.onresize = resize;
})();
</script>
<div class="left">&nbsp;</div><div class="middle"><div class="middletop">&nbsp;</div><div class="main">

<!-- content START -->

<input id="input_A" spellcheck="false" type="text" style="width: 100%;height: 1.5em;" placeholder="input_A">
</input> 
<br/>

<textarea id="input_B" spellcheck="false" style="width: 100%; height: 10.2em;overflow:y;resize:none;" placeholder="input_B"></textarea>
<br/>

<input type="button" value="ADD" onclick="func_ADD()" />

<input type="button" value="GOTO" onclick="func_GOTO()"   />
<br/>

<pre id='printf_target'><span class="weakresult">result</span><br></pre>

<!-- content END -->

</div></div><div class="right">&nbsp;</div>

<script type="text/javascript">
    __id__=['mobilecss','printf_target','background','input_A','input_B'];
    __all__=['isMobile','urlmap','printf','func_ADD','func_GOTO','antlr4'];
    
    printf_target = document.getElementById('printf_target');
    background = document.getElementById('background');
    input_A = document.getElementById('input_A');
    input_B = document.getElementById('input_B');

    
(function(){    
    document.getElementsByClassName('middletop')[0].style.marginTop=~~(innerHeight/10)+'px';
    printf = function(str,weak) {
        var node=document.createElement('span');
        if (weak){
            node.setAttribute('class','weakresult');
        } else {
            node.setAttribute('class','result');
        }
        node.innerText=str+'\n';
        printf_target.appendChild(node);
    }
})();
</script>
<script type="text/javascript">
function func_ADD(){
    //printf(input_A.value);
    console.clear();
    runOne();
}
function func_GOTO(){
    printf(input_B.value);
}
</script>

<script>
    input_A.value='input_A';
    input_B.value=String.raw`input_B`;
</script>

<script>
function runOne(){
    var input = input_A.value;

    printf(input);
}
runOne();
</script>
</body>
</html>